<template>
  <div id="promoterDetail" class="same-change-oldstyle">
    <div>
      <div class="same-head-box">
        <div class="saem-seat-box">
          <div class="saem-seat-left">
            <span>当前位置：</span>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item>员工管理</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/promoterList' }">销售员管理</el-breadcrumb-item>
              <el-breadcrumb-item>{{ (pageType==1 && "添加销售") || (pageType==2 && "编辑销售") || (pageType==3 && "查看销售") }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="saem-seat-right">
            <button class="same-search-btns same-search-export" @click="RefreshFun"
              v-if="pageType==2 || pageType==3">刷新</button>
            <button class="same-search-btns" @click="returnBack">返回</button>
          </div>
        </div>
      </div>
      <div class="communityDetail">
        <div class="detail-box">
          <div class="detail-head">
            <img src="../../../static/images/oC-icon8.png" width="15px" /> 销售员信息
          </div>
          <div class="detail-body">
            <div class="detail-cont">
              <div class="detail-list">姓名：{{data_all.full_name}}</div>
              <div class="detail-list">手机号码:{{data_all.tel}}</div>
              <div class="detail-list">账号：{{data_all.account}}</div>
              <div class="detail-list">账号状态：{{data_all.state==1?'正常':'离职'}}</div>
              <div class="detail-list">身份证号：{{data_all.id_card?data_all.id_card:'--'}}</div>
              <div class="detail-list">充值账户：{{data_all.recharge_account_balance}}</div>
              <div class="detail-list">提成占比：{{data_all.commission}}</div>
              <div class="detail-list">充值卡提成占比：{{data_all.recharge_commission}}</div>
              <div class="detail-list">可提现余额：{{data_all.account_balance}}</div>
              <div class="detail-list">冻结金额：{{data_all.freeze_money}}</div>
              <div class="detail-list">居住地址：{{data_all.province_name}}{{data_all.city_name}}{{data_all.area_name}}</div>
              <div class="detail-list">详细地址：{{data_all.address}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="communityDetail">
        <div class="detail-box">
          <div class="detail-head">
            <img src="../../../static/images/icon_sbzt.png" width="15px" /> 充值账户记录
          </div>
          <div class="detail-body">
            <div class="detail-cont">
              <div class="table_box">

                <div class="common-table-outer">
                  <el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
                    :data="tableData" stripe>
                    <el-table-column align="center" prop="date" label="时间">
                    </el-table-column>

                    <el-table-column align="center" label="类型">
                      <template slot-scope="scope">
                        <el-tag size="mini" type="success" v-if="scope.row.type == 1">收入</el-tag>
                        <el-tag size="mini" type="warning" v-else>支出</el-tag>
                        <span v-else>--</span>
                      </template>
                    </el-table-column>

                    <el-table-column align="center" prop="money" label="金额">
                    </el-table-column>


                    <el-table-column align="center" show-overflow-tooltip prop="note" label="备注">
                    </el-table-column>



                    <template slot="empty" v-if="!loading">
                      <div class="new-no-data-show">
                        <img src="../../assets/images/no-data.png" alt="">
                        <div>暂无相关数据</div>
                      </div>
                    </template>
                  </el-table>

                  <div class="same-page-inShow" v-if="tableData.length > 0 && !loading">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                      :current-page.sync="pageNo" :page-sizes="pageSizesList" :page-size="pageSize"
                      layout="total, prev, pager, next, jumper, sizes" :total="totalDataNumber"></el-pagination>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let promoterId = "";
  export default {
    name: "promoterDetail",
    data: function () {
      return {
        data_all: "", //新的数据
        pageNo: 1,
        pageSize: 10,
        pageSizesList: [10, 20, 30, 40, 50],
        tableData: [], // 返回的结果集合
        totalDataNumber: 0, // 数据的总数,-----
        loading: true
      };
    },
    // 初始化运行
    created: function () {
      const { id, type } = this.$route.query;
      if (id > 0) {
        promoterId = id;
        this.pageType = type;
        this.getPromoter();
        this.getRechargeRecord();
      }
    },

    inject: ["reload"],
    methods: {
      RefreshFun() {
        // 调用reload方法，刷新整个页面
        this.reload();
      },
      //返回
      returnBack() {
        this.$router.back(-1);
      },
      getRechargeRecord(page, pageSize) {
        this.$post({
          url: "Partner/Salesman/accountRecordList",
          data: {
            salesman_id: promoterId,
            page: this.pageNo,
            row: this.pageSize,
            time_line: true,
            type: 1
          },
          success: res => {
            if (res.code == 1000) {
              const source = res.data;
              const list = [],
                origin = source.data;
              origin.forEach(element => {
                console.log(element);
                element.child.forEach(item => {
                  list.push({
                    date: element.date + " " + item.add_time,
                    ...item
                  });
                });
              });
              this.tableData = [...list];
              this.totalDataNumber = parseInt(source.page.total);
              this.pageNo = source.page.current_page;
            }
            this.loading = false;
          }
        });
      },

      // 每页
      handleSizeChange(val) {
        var page = this.pageNo; // 当前页
        this.pageSize = val; // 当前每页显示条数
        this.getRechargeRecord(page, val); // 获取设备列表数据
      },
      // 分页
      handleCurrentChange(val) {
        var pageSize = this.pageSize; // 每页条数
        this.getRechargeRecord(val, pageSize); // 获取设备列表数据
      },
      getPromoter() {
        this.$post({
          url: "Partner/Salesman/getSalesman",
          data: { id: promoterId },
          success: res => {
            if (res.code == 1000) {
              this.data_all = res.data;
            } else {
              this.$message.error("获取销售信息失败");
            }
          }
        });
      }
    }
  };
</script>

<style scoped>
  #promoterDetail {
    width: 100%;
    height: 100%;
    background-color: #fafafa;
  }

  #promoterDetail .promoterDetail {
    background: #fafafa;
    padding-right: 20px;
    width: 100%;
    box-sizing: border-box;
  }

  #promoterDetail .detail-box {
    width: 100%;
    margin-top: 20px;
    background: #ffffff;
    padding: 20px 30px;
    box-sizing: border-box;
  }

  #promoterDetail .detail-head {
    font-size: 16px;
    font-weight: 500;
    color: #2d5686;
  }

  #promoterDetail .detail-head img {
    padding-right: 8px;
  }

  #promoterDetail .detail-body {
    width: 100%;
    padding: 14px 25px 0px 25px;
    box-sizing: border-box;
  }

  #promoterDetail .detail-cont {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1px solid #f3f3f3;
    padding-top: 25px;
  }

  #promoterDetail .table_box {
    width: 100%;
  }

  #promoterDetail .detail-list {
    width: 25%;
    padding: 0px 10px 25px 0px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 400;
    color: #4d4d4d;
  }

  #promoterDetail .pull-right {
    text-align: right;
    margin-top: 20px;
  }
</style>
